<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关注收藏</title>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="css/my/myOrder.css">
</head>

<body>
    <header>
        <img src="img/z-jiantou.png">
        <span>关注收藏</span>
        <a href="javascript:;" class="store_edit a_tab active">
            <span>编辑</span>
        </a>
        <a href="javascript:;" class="finish_btn a_tab">
            <span>完成</span>
        </a>
    </header>
    <div>
        <div class="am-container">
            <ul class="collection_tab">
                <li value="shop_tab">
                    <a href="javascript:;">商品</a>
                </li>
                <li class="active" value="store_tab">
                    <a href="javascript:;">店铺</a>
                </li>
            </ul>
            <div class="am-container hide_container shop_tab">
                <ul class="choose_tab h4_5">
                    <li class="active">
                        <a href="javascript:;">默认</a>
                    </li>
                    <li>
                        <a href="javascript:;">降价</a>
                    </li>
                    <li>
                        <a href="javascript:;">促销</a>
                    </li>
                    <li>
                        <a href="javascript:;">分类
                            <i></i>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">筛选
                            <i></i>
                        </a>
                    </li>
                </ul>
                <label class="store_lists">
                    <div class="am-fl custom_checkbox shop_checkbox active">
                        <input type="checkbox" value="1" name="store">
                        <span class="pay_radio">
                            <i></i>
                        </span>
                    </div>
                    <div class="am-fr shop_list_right">
                        <div class="shop_left_img">
                            <img src="img/img_left.jpg" alt="">
                            <i class="soldOut">已下架</i>
                        </div>
                        <ul>
                            <li>手工麻薯小吃永春麻糍糯米驴打滚干吃汤圆</li>
                            <li>￥36
                                <i></i>×6
                            </li>
                            <li>已有200人关注</li>
                        </ul>
                        <p class="addShopcar">
                            <i></i>
                        </p>
                    </div>
                </label>
                <label class="store_lists">
                    <div class="am-fl custom_checkbox store_checkbox active">
                        <input type="checkbox" value="2" name="store">
                        <span class="pay_radio">
                            <i></i>
                        </span>
                    </div>
                    <div class="am-fr shop_list_right">
                        <div class="shop_left_img">
                            <img src="img/img_left.jpg" alt="">
                            <i class="soldOut">已下架</i>
                        </div>

                        <ul>
                            <li>手工麻薯小吃永春麻糍糯米驴打滚干吃汤圆</li>
                            <li>￥36
                                <i></i>×6</li>
                            <li>已有200人关注</li>
                        </ul>
                        <p class="addShopcar">
                            <i></i>
                        </p>
                    </div>
                </label>
                <label class="store_lists">
                    <div class="am-fl custom_checkbox store_checkbox active">
                        <input type="checkbox" value="3" name="store">
                        <span class="pay_radio">
                            <i></i>
                        </span>
                    </div>
                    <div class="am-fr shop_list_right active">
                        <div class="shop_left_img">
                            <img src="img/img_left.jpg" alt="">
                            <i class="soldOut">已下架</i>
                        </div>
                        <ul>
                            <li>手工麻薯小吃永春麻糍糯米驴打滚干吃汤圆</li>
                            <li class="">暂无报价</li>
                            <li>暂无</li>
                        </ul>
                        <p class="addShopcar">
                            <i></i>
                        </p>
                    </div>
                </label>
            </div>
            <div class="am-container hide_container store_tab active">
                <ul class="choose_tab h4_5">
                    <li class="active">
                        <a href="javascript:;">默认排序</a>
                    </li>
                    <li>
                        <a href="javascript:;">促销优先</a>
                    </li>
                    <li>
                        <a href="javascript:;">有券优先</a>
                    </li>
                    <li>
                        <a href="javascript:;">筛选
                            <i></i>
                        </a>
                    </li>
                </ul>
                <label class="store_lists">
                    <div class="am-fl custom_checkbox store_checkbox active">
                        <input type="checkbox" value="1" name="store">
                        <span class="pay_radio">
                            <i></i>
                        </span>
                    </div>
                    <div class="am-fr store_list_right">
                        <img src="img/img_left.jpg" alt="">
                        <ul>
                            <li>DD女神衣橱</li>
                            <li>总销量；2666件</li>
                            <li>已有500人收藏</li>
                        </ul>
                    </div>
                </label>
                <label class="store_lists">
                    <div class="am-fl custom_checkbox store_checkbox active">
                        <input type="checkbox" value="2" name="store">
                        <span class="pay_radio">
                            <i></i>
                        </span>
                    </div>
                    <div class="am-fr store_list_right">
                        <img src="img/img_left.jpg" alt="">
                        <ul>
                            <li>DD女神衣橱</li>
                            <li>总销量；2666件</li>
                            <li>已有500人收藏</li>
                        </ul>
                    </div>
                </label>
                <label class="store_lists">
                    <div class="am-fl custom_checkbox store_checkbox active">
                        <input type="checkbox" value="3" name="store">
                        <span class="pay_radio">
                            <i></i>
                        </span>
                    </div>
                    <div class="am-fr store_list_right">
                        <img src="img/img_left.jpg" alt="">
                        <ul>
                            <li>DD女神衣橱</li>
                            <li>总销量；2666件</li>
                            <li>已有500人收藏</li>
                        </ul>
                    </div>
                </label>
            </div>
        </div>
        <div class="del_btn shop_del am-cf">
            <label class="custom_checkbox">
                <input type="checkbox" class="allChoose">
                <span class="pay_radio">
                    <i></i>
                </span>
                <em>全选</em>
            </label>
            <button type="button" class="am-fr bg-btn">删除（1）</button>
        </div>
        <div class="del_btn shore_del am-cf">
            <label class="custom_checkbox">
                <input type="checkbox" class="allChoose">
                <span class="pay_radio">
                    <i></i>
                </span>
                <em>全选</em>
            </label>
            <button type="button" class="am-fr bg-btn">删除（1）</button>
        </div>
    </div>

    <script src="assets/js/jquery.min.js"></script>
    <script>
        // 编辑、完成
        $(".store_edit").on('click', function () {
            $('.store_checkbox').show();
            $('.shop_checkbox').show();
            $('.del_btn').show();
            if ($('.collection_tab li')) {

            }
            $('.store_list_right').css('width', '85%');
            $('.shop_list_right').css('width', '85%');
            $('.store_edit').hide();
            $('.finish_btn').show();
        })
        $('.finish_btn').on('click', function () {
            $('.store_checkbox').hide();
            $('.shop_checkbox').hide();
            $('.del_btn').hide();
            $('.store_list_right').css('width', '100%');
            $('.shop_list_right').css('width', '100%');
            $('.finish_btn').hide();
            $('.store_edit').show();
        })


        $('.collection_tab').on('click', 'li', function () {
            $val = $(this).attr('value');
            $(this).addClass('active').siblings().removeClass('active');
            $('.hide_container.' + $val).addClass('active').siblings().removeClass('active');
        })

        $('.allChoose').on('click', function () {
            if (this.checked) {
                $("[name=shop]").prop("checked", true);
                $("[name=store]").prop("checked", true);
            } else {
                $("[name=shop]").prop("checked", false);
                $("[name=store]").prop("checked", false);
            }
        })

        // $(function () {
        //     var shopCheckcell = $("[name=shop]"),
        //         shoreCheckcell = $("[name=store]")
        //     shopCheckcell.on('click', function () {
        //         var isCheck = false;
        //         for (var i = 0; i < shopCheckcell.length; i++) {
        //             if (shopCheckcell.eq(i).prop('checked') == false) {
        //                 isCheck = true;
        //             }
        //             if (isCheck == false) {
        //                 $('.allChoose').prop('checked', true);
        //             } else {
        //                 $('.allChoose').prop('checked', false);
        //             }
        //         }
        //     })
        // })


        $('.choose_tab li').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
    </script>
</body>

</html>